const listenScroll = (value, el) => {
  const rect = el?.getBoundingClientRect()
  const hideDom = (
    rect?.top >= (window.innerHeight || document.documentElement.clientHeight) || rect?.bottom <= 0
  )
  const classArr = el?.classList
  if (hideDom) {
    if (classArr?.contains(value)) {
      classArr.remove(value)
    }
  } else {
    if (classArr?.contains(value)) {
      classArr.remove(value)
    }
    classArr?.add(value)
  }
}

export default {
  mounted (el, data) {
    const { value } = data || {}
    const handler = () => listenScroll(value, el)
    el._scrollAnimate = handler
    // 指令参数为animate.css类名字
    window.addEventListener('scroll', el._scrollAnimate)
  },
  unmounted (el) {
    window.removeEventListener('scroll', el._scrollAnimate)
    el._scrollAnimate = null
  }
}
